<vdr-page-block>
    <div class="my-2">
        <vdr-asset-search-input
            [tags]="allTags$ | async"
            (searchTermChange)="searchTerm$.next($event)"
            (tagsChange)="filterByTags$.next($event)"
        >
            <vdr-asset-file-input
                (selectFiles)="filesSelected($event)"
                [uploading]="uploading"
                dropZoneTarget=".content-area"
            ></vdr-asset-file-input>
        </vdr-asset-search-input>
    </div>
    <vdr-asset-gallery
        [assets]="(items$ | async)! | paginate : (paginationConfig$ | async) || {}"
        [multiSelect]="true"
        [canDelete]="['DeleteCatalog', 'DeleteAsset'] | hasPermission"
        (deleteAssets)="deleteAssets($event)"
    ></vdr-asset-gallery>

    <div class="paging-controls">
        <vdr-items-per-page-controls
            [itemsPerPage]="itemsPerPage$ | async"
            (itemsPerPageChange)="setItemsPerPage($event)"
        ></vdr-items-per-page-controls>

        <vdr-pagination-controls
            [currentPage]="currentPage$ | async"
            [itemsPerPage]="itemsPerPage$ | async"
            [totalItems]="totalItems$ | async"
            (pageChange)="setPageNumber($event)"
        ></vdr-pagination-controls>
    </div>
</vdr-page-block>
